<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="离职继承" name="depart">
      <el-button type="primary" size="mini" @click="syncDepart()">同步离职人员</el-button>
      <el-tabs v-model="activeDepartName" @tab-click="handleDepartClick">
        <el-tab-pane label="待分配离职员工" name="unassigned">
          <el-table :data="unassignedData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                    v-loading="loading">
            <el-table-column prop="name" label="已离职员工 "> </el-table-column>
            <el-table-column prop="unassigned_count" label="待分配客户数"> </el-table-column>
            <el-table-column prop="unassigned_group_count" label="待分配群聊数"> </el-table-column>
            <el-table-column prop="dimission_time" label="离职时间"></el-table-column>
            <el-table-column prop="userid" label="操作">
              <template slot-scope="scope">
                <PersButton type="text" size="mini" label="查看详情" icon="fa  fa-pencil" @click="unassignedInfo(scope.row)"></PersButton>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNumber"
                :page-sizes="[10, 50, 100, 200]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
          <el-dialog :visible.sync="open" width="900px" append-to-body title="分配离职员工" @close="restTable()">
            <div>员工：{{yuangong.name}}</div>
            <div>离职时间：{{yuangong.dimission_time}}</div>
            <el-tabs v-model="activeAllocationName" @tab-click="handleUnassignedClick">
              <el-tab-pane label="待分配客户" name="allocation_customers">
                <el-table :data="allocationCustomers" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                          v-loading="loading" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="external_name" label="待分配客户"> </el-table-column>
                  <el-table-column prop="tags" label="企业标签"> </el-table-column>
                  <el-table-column prop="userid" label="操作">
                    <template slot-scope="scope">
                      <PersButton type="text" size="mini" label="分配" icon="fa  fa-pencil" @click="allocationCustomer(scope.row)"></PersButton>
                    </template>
                  </el-table-column>
                </el-table>
                <div>已选{{multipleSelection.length}}个客户 <el-button type="primary" size="mini" @click="allocationCustomerBatch()">批量分配</el-button></div>
                <el-dialog :visible.sync="allocationCustomerOpen" width="900px" append-to-body title="分配客户">
                  <div class="tips">每位客户90天内仅可被转接2次，建议慎重操作</div>
                  <div class="allocation-box">
                    <div class="allocation-column">
                      <span class="required">*</span>分配给员工：<el-select v-model="staff_active_value" clearable filterable placeholder="请选择">
                      <el-option
                          v-for="item in staff_select_list"
                          :key="item.userid"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                    </div>
                    <div class="allocation-column">
                      <span class="required">*</span>待分配客户：{{allocation_active_customer}}
                    </div>
                    <div class="allocation-column" style="text-align: right;">
                                            <span slot="footer" class="dialog-footer">
                                                <el-button @click="allocationCustomerOpen = false">取 消</el-button>
                                                <el-button type="primary" @click="confirmAllocation()">确 定</el-button>
                                            </span>
                    </div>
                  </div>
                </el-dialog>
                <el-dialog :visible.sync="allocationCustomerBatchOpen" width="900px" append-to-body title="分配客户(批量)">
                  <div class="tips">每位客户90天内仅可被转接2次，建议慎重操作</div>
                  <div class="allocation-box">
                    <div class="allocation-column">
                      <span class="required">*</span>分配给员工：<el-select v-model="staff_active_value" clearable filterable placeholder="请选择">
                      <el-option
                          v-for="item in staff_select_list"
                          :key="item.userid"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                    </div>
                    <div class="allocation-column">
                      <span class="required">*</span>待分配客户：
                      <el-tag
                          class="customer_tag"
                          v-for="customer in multipleSelection"
                          :key="customer.external_userid"
                          closable
                          @close="handleDelCustomer(customer)">
                        {{customer.external_name}}
                      </el-tag>
                    </div>
                    <div class="allocation-column" style="text-align: right;">
                                            <span slot="footer" class="dialog-footer">
                                                <el-button @click="allocationCustomerOpen = false">取 消</el-button>
                                                <el-button type="primary" @click="confirmBatchAllocation()">确 定</el-button>
                                            </span>
                    </div>
                  </div>
                </el-dialog>
              </el-tab-pane>
              <el-tab-pane label="待分配群聊" name="allocation_groups">
                <el-table :data="unassigned_group_list" style="width: 100%;margin-bottom: 20px;" row-key="chatid" border stripe default-expand-all
                          v-loading="loading" @selection-change="handleGroupSelectionChange">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="chatname" label="待分配群聊"> </el-table-column>
                  <el-table-column prop="create_time" label="创建时间"> </el-table-column>
                  <el-table-column prop="chatid" label="操作">
                    <template slot-scope="scope">
                      <PersButton type="text" size="mini" label="分配" icon="fa  fa-pencil" @click="OpenAllocationGroupDialog(scope.row)"></PersButton>
                    </template>
                  </el-table-column>
                </el-table>
                <div>已选{{multipleGroupSelection.length}}个群 <el-button type="primary" size="mini" @click="OpenAllocationGroupDialog()">批量分配</el-button></div>
                <el-dialog :visible.sync="allocationGroupOpen" width="900px" append-to-body title="分配群">
                  <div class="tips">每位客户90天内仅可被转接2次，建议慎重操作</div>
                  <div class="allocation-box">
                    <div class="allocation-column">
                      <span class="required">*</span>分配给员工：<el-select v-model="staff_active_value" clearable filterable placeholder="请选择">
                      <el-option
                          v-for="item in staff_select_list"
                          :key="item.userid"
                          :label="item.name"
                          :value="item.userid">
                      </el-option>
                    </el-select>
                    </div>
                    <div class="allocation-column">
                      <span class="required">*</span>待分配群：<el-tag
                        class="customer_tag"
                        v-for="group in multipleGroupSelection"
                        :key="group.chatid"
                        closable
                        @close="handleDelGroup(group)">
                      {{group.chatname}}
                    </el-tag>
                    </div>
                    <div class="allocation-column" style="text-align: right;">
                                            <span slot="footer" class="dialog-footer">
                                                <el-button @click="allocationCustomerOpen = false">取 消</el-button>
                                                <el-button type="primary" @click="confirmBatchAllocationGroup()">确 定</el-button>
                                            </span>
                    </div>
                  </div>
                </el-dialog>
              </el-tab-pane>
            </el-tabs>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="已分配离职员工" name="assigned">
          <el-form :inline="true" ref="form" :model="form" label-width="80px" style="margin: 20px;">
            <el-form-item label="离职时间" prop="select_date" class="date_picker">
              <el-date-picker
                  v-model="form.select_date"
                  type="daterange"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item class='caozuo' size="mini">
              <el-button type="primary" @click="submitForm('form')" size="medium">搜索</el-button>
              <el-button @click="resetForm('form')" size="medium">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="assignedData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                    v-loading="loading">
            <el-table-column prop="name" label="离职员工 "> </el-table-column>
            <el-table-column prop="unassigned_count" label="已分配客户数"> </el-table-column>
            <el-table-column prop="unassigned_group_count" label="已分配群聊数"> </el-table-column>
            <el-table-column prop="dimission_time" label="离职时间"></el-table-column>
            <el-table-column prop="userid" label="操作">
              <template slot-scope="scope">
                <PersButton type="text" size="mini" label="查看详情" icon="fa  fa-pencil" @click="assignedInfo(scope.row)"></PersButton>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNumber"
                :page-sizes="[10, 50, 100, 200]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
          <el-dialog :visible.sync="assignedOpen" width="900px" append-to-body title="已分配离职员工">
            <div>员工：{{yuangong.name}}</div>
            <div>离职时间：{{yuangong.dimission_time}}</div>
            <el-tabs v-model="activeAssignedName" @tab-click="handleAssignedClick">
              <el-tab-pane label="已分配客户" name="assigned_customers">
                <el-table :data="assignedCustomers" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                          v-loading="loading">
                  <el-table-column prop="external_name" label="客户"> </el-table-column>
                  <el-table-column prop="tags" label="企业标签"> </el-table-column>
                  <el-table-column prop="takeover_time" label="分配时间"> </el-table-column>
                  <el-table-column prop="takever_name" label="继承员工"> </el-table-column>
                  <el-table-column prop="userid" label="继承状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status === 1">继承完毕</span>
                      <span v-if="scope.row.status === 2">继承中</span>
                      <span v-if="scope.row.status === 3">客户拒绝</span>
                      <span v-if="scope.row.status === 4">接替成员客户达到上限</span>
                      <el-button class="sync_transfer" type="primary" size="mini" @click="syncTransferCustomer(scope.row)">同步继承状态</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="pageNumber"
                      :page-sizes="[10, 50, 100, 200]"
                      :page-size="pageSize"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                  </el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane label="已分配群聊" name="assigned_groups">
                <el-table :data="assigned_group_chat_list" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                          v-loading="loading">
                  <el-table-column prop="chatname" label="群聊"> </el-table-column>
                  <el-table-column prop="create_time" label="创建时间"> </el-table-column>
                  <el-table-column prop="takeover_time" label="分配时间"> </el-table-column>
                  <el-table-column prop="new_owner_name" label="继承员工 "></el-table-column>
                  <el-table-column prop="chatid" label="继承状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status === 1">跟进人离职</span>
                      <span v-if="scope.row.status === 2">离职继承中</span>
                      <span v-if="scope.row.status === 3">离职继承完成</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="pageNumber"
                      :page-sizes="[10, 50, 100, 200]"
                      :page-size="pageSize"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                  </el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="在职转接" name="onjob">
      <el-tabs v-model="activeOnJobName" @tab-click="handleOnJobClick">
        <el-tab-pane label="客户转接" name="on_job">
          <el-form :inline="true" ref="form" :model="form" label-width="80px" style="margin: 20px;">
            <el-form-item label="员工列表" prop="staff_userid" class="date_picker">
              <el-select v-model="form.staff_userid" clearable filterable placeholder="请选择">
                <el-option
                    v-for="item in staff_select_list"
                    :key="item.userid"
                    :label="item.name"
                    :value="item.userid">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class='caozuo' size="mini">
              <el-button type="primary" @click="submitStaffForm('form')" size="medium">搜索</el-button>
              <el-button @click="resetForm('form')" size="medium">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="on_job_customers_list" style="width: 100%;margin-bottom: 20px;" border stripe row-key="id"
                    v-loading="loading" @selection-change="handleOnJobSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="customer_name" label="客户名称"> </el-table-column>
            <el-table-column prop="assistant_name" label="所属员工"> </el-table-column>
            <el-table-column prop="create_time" label="客户添加时间"> </el-table-column>
            <el-table-column prop="tags" label="企业标签"></el-table-column>
            <el-table-column prop="client_userid" label="操作">
              <template slot-scope="scope">
                <PersButton type="text" size="mini" label="分配" icon="fa  fa-pencil" @click="assignedOnJob(scope.row)"></PersButton>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-bottom: 15px">
            已选{{multipleOnJobSelection.length}}个员工 <el-button type="primary" size="mini" @click="assignedOnJob()">批量分配</el-button>
          </div>
          <div class="block">
            <el-pagination
                @size-change="handleSizeOnJobChange"
                @current-change="handleCurrentOnJobChange"
                :current-page="pageNumber"
                :page-sizes="[10, 50, 100, 200]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
          <el-dialog :visible.sync="onJobOpen" width="900px" append-to-body title="分配客户" @close="restOnJobDialog()">
            <div class="tips">每位客户90天内仅可被转接2次，建议慎重操作</div>
            <div class="allocation-box">
              <div class="allocation-column">
                <span class="required">*</span>分配给员工：<el-select v-model="staff_active_value" clearable filterable placeholder="请选择">
                <el-option
                    v-for="item in staff_select_list"
                    :key="item.userid"
                    :label="item.name"
                    :value="item.userid">
                </el-option>
              </el-select>
              </div>
              <div class="allocation-column">
                <span class="required">*</span>待分配客户：
                <el-tag
                    class="customer_tag"
                    v-for="customer in multipleOnJobSelection"
                    :key="customer.id"
                    closable
                    @close="handleDelOnJob(customer)">
                  {{customer.customer_name}}
                </el-tag>
              </div>
              <div class="allocation-column">
                <span class="required">*</span>发给客户的消息：<el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="transfer_success_msg">
              </el-input>
              </div>
              <div class="allocation-column" style="text-align: right;">
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="onJobOpen = false">取 消</el-button>
                                    <el-button type="primary" @click="confirmBatchOnJob()">确 定</el-button>
                                </span>
              </div>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="转接记录" name="on_job_log">
          <el-table :data="yi_fen_pei_list" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                    v-loading="loading" >
            <el-table-column prop="external_name" label="客户姓名"> </el-table-column>
            <el-table-column prop="create_time" label="客户添加时间"> </el-table-column>
            <el-table-column prop="handover_name" label="转接前员工"> </el-table-column>
            <el-table-column prop="takeover_time" label="转接时间"> </el-table-column>
            <el-table-column prop="takeover_name" label="转接员工"></el-table-column>
            <el-table-column prop="status" label="转接状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status === 1">继承完毕</span>
                <span v-if="scope.row.status === 2">等待接替</span>
                <span v-if="scope.row.status === 3">客户拒绝</span>
                <span v-if="scope.row.status === 4">接替成员客户达到上限</span>
                <el-button class="sync_transfer" type="primary" size="mini" @click="syncTransferResult(scope.row)" v-if="scope.row.status === 2">同步继承状态</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
                @size-change="handleSizeOnJobChange"
                @current-change="handleCurrentOnJobChange"
                :current-page="pageNumber"
                :page-sizes="[10, 50, 100, 200]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {
  getUnassignedList,
  getAllocationCustomers,
  yuangongList,
  allocationCustomer,
  insertUnassignedList,
  allocationCustomerBatch,
  getAssignedList,
  getAssignedCustomers,
  getTransferResult,
  getUnassignedGroupList,
  allocationGroup,
  getAssignedGroupChatList,
  getOnjobCustomersList,
  onJobTransferCustomer,
  getYiFenPeiList,
  getOnJobStatus
} from "@/api/scrm/unassigned/unassigned";
import PersButton from "@/components/PersButton.vue";

export default {
  components:{
    PersButton
  },
  data() {
    return {
      loading: false,
      activeName: 'depart', //最外面一层tab，选中标签页
      activeDepartName: 'unassigned', //离职继承里tab，选中标签页
      activeAllocationName:'allocation_customers', //查看详情里tab--待分配
      unassignedData:[], //待分配离职员工
      open: false, //弹框是否显示
      allocationCustomerOpen:false, //分配弹框是否显示
      yuangong:[], //查看详情--员工

      allocationCustomers:[], //待分配客户

      staff_select_list:[], //下拉员工选项列表
      staff_active_value:'', //下拉选中的userid
      allocation_active_customer:'', //待分配客户名称
      allocation_active_customer_id:'', //待分配客户用户ID

      multipleSelection:[], //多选客户集合
      allocationCustomerBatchOpen:false, //分配弹框是否显示,批量

      assignedData:[], //已分配离职员工
      assignedOpen:false, //已分配弹框
      activeAssignedName:'assigned_customers',
      assignedCustomers:[], //已分配客户
      form:{
        select_date:'',
        staff_userid:''
      },

      unassigned_group_list:[], //待分配群聊列表
      allocationGroupOpen:false,
      multipleGroupSelection:[], //多选群集合
      assigned_group_chat_list:[], //已分配群聊列表

      on_job_customers_list:[], //获取在职成员的客户列表
      activeOnJobName:'on_job',
      onJobOpen:false,
      multipleOnJobSelection:[],
      transfer_success_msg:'',
      yi_fen_pei_list:[],


      pageSize: 10, //一页显示多少条
      pageNumber: 1,
      total: 0, //总页数
    }
  },
  created(){
    this.init();
  },
  methods: {
    init(){
      this.loading = true;
      let param = {
        "size": this.pageSize,
        "page": this.pageNumber,
      }
      getUnassignedList(param).then((res) => {
        if (res.code == 200) {
          this.unassignedData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      })
    },
    initPage(){
      this.pageSize = 10;
      this.pageNumber = 1;
      this.total = 0;
    },
    initOnJob(){
      //初始化数据
      this.loading = true;
      // this.initPage();
      let param = {
        "size": this.pageSize,
        "page": this.pageNumber,
        "staff_userid":this.form.staff_userid
      }
      getOnjobCustomersList(param).then((res) => {
        if (res.code == 200) {
          this.on_job_customers_list = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      })
    },
    handleClick(tab, event) {
        this.initPage
      if(tab.name == 'depart'){
        this.init();
      }else{
        this.initOnJob();
        yuangongList().then((res) => {
          if (res.code == 200) {
            this.staff_select_list = res.data;
            this.loading = false;
          }
        })
      }
    },
    handleDepartClick(tab, event){
      this.loading = true;
      this.initPage();
      let param = {
        "size": this.pageSize,
        "page": this.pageNumber,
      }
      getAssignedList(param).then((res) => {
        if (res.code == 200) {
          this.assignedData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      })
    },
    handleUnassignedClick(tab, event){
      this.loading = true;
      this.initPage();
      let param = {
        "size": this.pageSize,
        "page": this.pageNumber,
        "handover_userid":this.yuangong.userid
      }
      getUnassignedGroupList(param).then((res) => {
        if (res.code == 200) {
          this.unassigned_group_list = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      })
    },
    handleAssignedClick(tab, event){
      this.loading = true;
      this.initPage();
      let param = {
        "size": this.pageSize,
        "page": this.pageNumber,
      }
      getAssignedGroupChatList(param).then((res) => {
        if (res.code == 200) {
          this.assigned_group_chat_list = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      })
    },
    syncDepart:function (){
      this.loading = true;
      insertUnassignedList().then((res) => {
        if (res.code == 200) {
          this.$message({message:'同步成功',type:'success'});
          this.loading = false;
        }
      })
    },
    handleSizeChange: function(e) {
      this.pageSize = e;
      this.init();
      this.initOnJob();
    },
    handleCurrentChange: function(e) {
      this.pageNumber = e;
      this.init();
      this.initOnJob();
    },
    handleSizeOnJobChange: function(e) {
      this.pageSize = e;
      this.initOnJob();
    },
    handleCurrentOnJobChange: function(e) {
      console.log(e)
      this.pageNumber = e;
      this.initOnJob();
    },
    unassignedInfo: async function(data){
      this.open=true;
      this.yuangong = data;
      this.loading = true;
      //初始化数据
      this.initPage();

      let param = {
        "size": this.pageSize,
        "page": this.pageNumber,
        'userid':data.userid
      }
      getAllocationCustomers(param).then((res) => {
        if (res.code == 200) {
          this.allocationCustomers = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      })
    },
    handleOnJobClick:function (e){
      this.loading = true;
      //初始化数据
      this.initPage();

      if(e.name == 'on_job'){
          this.initOnJob();
      }else{
          let param = {
              "size": this.pageSize,
              "page": this.pageNumber,
          }
          getYiFenPeiList(param).then((res) => {
              if (res.code == 200) {
                  this.yi_fen_pei_list = res.data.list;
                  this.total = res.data.total;
                  this.loading = false;
              }
          })
      }
    },
    allocationCustomer:async function(data){
      this.open = false;
      this.allocationCustomerOpen = true;
      this.allocation_active_customer = data.external_name;
      this.allocation_active_customer_id = data.external_userid;
      yuangongList().then((res) => {
        if (res.code == 200) {
          this.staff_select_list = res.data;
          this.loading = false;
        }
      })
    },
    confirmAllocation:function (){
      let param = {
        "handover_userid": this.yuangong.userid,
        "takeover_userid": this.staff_active_value,
        'external_userid':this.allocation_active_customer_id
      }

      allocationCustomer(param).then((res) => {
        if (res.code == 200) {
          this.$message({message:'继承成功，此时开始分配流程,待24小时后自动接替,并不代表最终分配成功',type: 'success'});
          this.allocationCustomerOpen = false;
        }
      })
    },
    handleSelectionChange: function(e) {
      let selectChang = []
      for (let item of e) {
        selectChang.push(item)
      }
      this.multipleSelection = selectChang;
    },
    handleGroupSelectionChange: function(e) {
      let selectChang = []
      for (let item of e) {
        selectChang.push(item)
      }
      this.multipleGroupSelection = selectChang;
    },
    handleOnJobSelectionChange: function(e) {
      let selectChang = []
      for (let item of e) {
        selectChang.push(item)
      }
      this.multipleOnJobSelection = selectChang;
    },
    allocationCustomerBatch:async function(data){
      this.open = false;
      this.allocationCustomerBatchOpen = true;
      yuangongList().then((res) => {
        if (res.code == 200) {
          this.staff_select_list = res.data;
          this.loading = false;
        }
      })
    },
    handleDelCustomer:function (data){
      const index = this.multipleSelection.findIndex(innerArray =>
          innerArray.toString() === data.toString());
      if (index !== -1) {
        this.multipleSelection.splice(index, 1);
      }
    },
    handleDelGroup:function (data){
      const index = this.multipleGroupSelection.findIndex(innerArray =>
          innerArray.toString() === data.toString());
      if (index !== -1) {
        this.multipleGroupSelection.splice(index, 1);
      }
    },
    handleDelOnJob:function (data){
      const index = this.multipleOnJobSelection.findIndex(innerArray =>
          innerArray.toString() === data.toString());
      if (index !== -1) {
        this.multipleOnJobSelection.splice(index, 1);
      }
    },
    confirmBatchAllocation:function (){
      let param = {
        "handover_userid": this.yuangong.userid,
        "takeover_userid": this.staff_active_value,
        'external_info':this.multipleSelection
      }

      allocationCustomerBatch(param).then((res) => {
        if (res.code == 200) {
          this.$message({message:'继承成功，此时开始分配流程,待24小时后自动接替,并不代表最终分配成功',type: 'success'});
          this.allocationCustomerBatchOpen = false;
        }
      })
    },
    assignedInfo: async function(data){
      this.assignedOpen=true;
      this.yuangong = data;
      this.loading = true;
      //初始化数据
      this.initPage();

      let param = {
        "size": this.pageSize,
        "page": this.pageNumber,
        'userid':data.userid
      }
      getAssignedCustomers(param).then((res) => {
        if (res.code == 200) {
          this.assignedCustomers = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      })
    },
    syncTransferCustomer:function (data){
      this.loading = true;
      //初始化数据
      this.initPage();
      let param = {
        "handover_userid": data.handover_userid,
        "takeover_userid": data.takeover_userid,
        'external_userid':data.external_userid
      }
      getTransferResult(param).then((res) => {
        if (res.code == 200) {
          this.$message({message:'同步成功',type: 'success'});
          let param = {
            "size": this.pageSize,
            "page": this.pageNumber,
            'userid':data.handover_userid
          }
          getAssignedCustomers(param).then((res) => {
            if (res.code == 200) {
              this.assignedCustomers = res.data.list;
              this.total = res.data.total;
              this.loading = false;
            }
          })

        }
      })
    },
    syncTransferResult:function (data){
      this.loading = true;
      //初始化数据
      // this.initPage();
      let param = {
        "handover_userid": data.handover_userid,
        "takeover_userid": data.takeover_userid,
        'external_userid': data.external_userid
      }

      getOnJobStatus(param).then((res) => {
        if (res.code == 200) {
          if(res.data.status === 1){
            this.$message({message:'同步成功',type: 'success'});
          }else if(res.data.status === 2){
            this.$message({message:'继承中',type:'warning'});
          }else if(res.data.status === 3){
            this.$message({message:'客户拒绝',type:'error'});
          }else if(res.data.status === 4){
            this.$message({message:'接替成员客户达到上限',type:'error'});
          }
            this.loading = true;
            let param = {
                "size": this.pageSize,
                "page": this.pageNumber,
            }
            getYiFenPeiList(param).then((res) => {
                if (res.code == 200) {
                    this.yi_fen_pei_list = res.data.list;
                    this.total = res.data.total;
                    this.loading = false;
                }
            })
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        let param = {
          "size": this.pageSize,
          "page": this.pageNumber,
          "date": this.form.select_date
        }
        getAssignedList(param).then((res) => {
          if (res.code == 200) {
            this.assignedData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
          }
        })
      });
    },
    submitStaffForm(formName) {
      this.$refs[formName].validate((valid) => {
        this.initOnJob();
      });
    },
    restTable(){
      this.yuangong = [];
      this.unassigned_group_list = [];
      this.activeAllocationName = 'allocation_customers'
    },
    restOnJobDialog(){
      this.multipleOnJobSelection = [];
      this.staff_active_value = [];
    },
    OpenAllocationGroupDialog:function (data){
      if(data !== undefined && data.length > 0){
        this.multipleGroupSelection.push(data);
      }

      this.allocationGroupOpen = true;
      yuangongList().then((res) => {
        if (res.code == 200) {
          this.staff_select_list = res.data;
          this.loading = false;
        }
      })
    },
    confirmBatchAllocationGroup:function (){
      let param = {
        "new_owner": this.staff_active_value,
        'group_info':this.multipleGroupSelection
      }

      allocationGroup(param).then((res) => {
        if (res.code == 200) {
          this.$message({message:'继承成功',type:'success'});
          this.open = false;
          this.allocationGroupOpen = false;
        }
      })
    },
    assignedOnJob:function (data){
      this.onJobOpen = true;
      if(data !== undefined){
        this.multipleOnJobSelection.push(data);
      }

      yuangongList().then((res) => {
        if (res.code == 200) {
          this.staff_select_list = res.data;
          this.loading = false;
        }
      })
    },
    confirmBatchOnJob:function (){
      let param = {
        'customer_info' : this.multipleOnJobSelection,
        "takeover_userid": this.staff_active_value,
        "transfer_success_msg":this.transfer_success_msg
      }

      onJobTransferCustomer(param).then((res) => {
        if (res.code == 200) {
          this.$message({message:'继承成功',type:'success'});
          this.open = false;
          this.onJobOpen = false;
        }else{
          this.$message.error('继承失败');
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.tips{
  width:90%;
  height: 30px;
  line-height: 30px;
  background-color: #66b1ff;
  color: #fff;
  padding-left: 30px;
}
.required{
  color: #f00;
}
.allocation-column{
  margin-top: 20px;
}
.customer_tag{
  margin-right: 10px;
}
.sync_transfer{
  margin-left: 10px;
}
.date_picker{
  float: left;
}
.caozuo{
  float: left;
}
::v-deep .el-form-item__content{
  margin-left: 20px !important;
}
</style>